<template>
  <div>
    <el-form class="search-form">
      <el-form-item label="名称">
        <el-input v-model="searchForm.name"
                  clearable
                  style="width:150px" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="searchForm.description"
                  clearable
                  style="width:150px" />
      </el-form-item>
    </el-form>
    <div class="operations">
      <el-button type="success"
                 @click="load">查询</el-button>
      <el-button type="primary"
                 @click="openForm()">新增</el-button>
      <el-button type="danger"
                 :disabled="seleteList.length == 0"
                 @click="deleteHandle()">批量删除</el-button>
    </div>
    <el-table :data="dataList"
              stripe
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55" />
      <el-table-column width="55">
        <template #default="scope">
          <i class="el-icon-sort-down arrow"
             @click="updateSortHandle(scope.row.id,-1)"></i>
          <i class="el-icon-sort-up arrow"
             @click="updateSortHandle(scope.row.id,1)"></i>
        </template>

      </el-table-column>
      <el-table-column prop="name"
                       label="名称" />
      <el-table-column prop="description"
                       :show-overflow-tooltip="true"
                       label="描述" />
      <el-table-column prop="链接"
                       label="webUrl" />
      <el-table-column prop="pic"
                       label="图片">
        <template #default="scope">
          <el-image style="width:100px;height:80px;object-fit:cover;"
                    :src="scope.row.pic"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200">
        <template #default="scope">
          <el-button type="primary"
                     @click="openForm(scope.row.id)">编辑</el-button>
          <el-button type="danger"
                     @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next, jumper,total"
                   :total="total"
                   :current-page="pageNum"
                   style="margin-top:15px"
                   @size-change="pageSizeChange"
                   @current-change="pageChange" />
    <Form ref="form"
          @refresh="load" />
  </div>
</template>

<script>
import { getExhibitionPage, deleteExhibitionBatch, deleteExhibitionById, updateSort } from '@/api/bigdata/exhibition'
import Form from './components/form.vue'
export default {
  components: { Form },
  data () {
    return {
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        name: '',
        description: ''
      },
      seleteList: []
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    async load () {
      const data = await getExhibitionPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.searchForm.name,
        description: this.searchForm.description,
      })
      console.log(data)
      this.dataList = data.data.records
      this.total = data.data.total
    },
    pageChange (page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange (size) {
      this.pageSize = size
      this.load()
    },
    handleSelectionChange (rows) {
      this.seleteList = rows
    },
    openForm (id) {
      this.$refs.form.init(id)
    },
    deleteHandle (id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteExhibitionById, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteExhibitionBatch, ids)
        }
      })
        .catch(() => { })
    },
    delete (operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    },
    updateSortHandle (exhibitionId, type) {
      updateSort({
        exhibitionId: exhibitionId,
        type: type
      }).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        }).catch(() => {
          this.$message({
            type: 'danger',
            message: '操作失败'
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form {
  margin: 10px 0;
  padding: 0 10px;
  display: flex;
  .el-form-item {
    margin-right: 20px;
  }
}
.arrow {
  cursor: pointer;
}

.arrow:hover {
  color: #409eff;
}
.operations {
  padding: 0 10px;
}
</style>
